<template>
    <view class="containerForm">
        <form @submit="submitForm" @reset="resetForm">
            <view class="form-item column">
                <view class="form-item-title">问题</view>
                <view>
                    <input class="uni-input" v-model="form.title" name="title" placeholder="请输入您的问题" confirm-type="next"
                        placeholder-style="color: #F5F5F5;" />
                    <textarea class="uni-input textaresa" v-model="form.content" name="content" placeholder="请详细描述您的问题"
                        confirm-type="next" placeholder-style="color: #F5F5F5;" />
                </view>
                <view class="form-item-title">联系人</view>
                <view>
                    <input class="uni-input" name="username" v-model="form.username" placeholder-style="color: #F5F5F5;"
                        placeholder="请输入联系人" confirm-type="next" />
                </view>
                <view class="form-item-title">联系电话</view>
                <view>
                    <input class="uni-input" name="contact" v-model="form.contact" placeholder-style="color: #F5F5F5;"
                        placeholder="请输入联系电话" type="number" />
                </view>
            </view>
            <button form-type="submit" class="uni-buttons">提交</button>
        </form>

    </view>

</template>

<script>
import { submitMessage } from '@/api/api'
export default {
    data() {
        return {
            form: {
                title: '',
                content: '',
                images: [],
                contact: '',
                username: ''
            }
        }
    },
    methods: {
        submitForm(e) {
            let form = e.detail.value;
            console.log(form)
            for (let key in form) {
                if (!form[key]) return uni.showToast({ title: '请填写完整信息', icon: 'none' })
            }
            submitMessage(form).then(res => {
                if (res.code == 1) {
                    uni.showToast({ title: '提交成功', icon: 'none' })
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 1500)
                }
            })
        },
        resetForm(e) {
            console.log(e)
        }
    },
}
</script>
<style lang="scss">
page {
    background-color: #ffffff;
}

.containerForm {
    padding: 30upx 20upx;
    position: relative;
    height: 100vh;
}

.form-item-title {
    color: #333333;
    font-size: 30upx;
    margin-bottom: 20upx;
    margin-top: 30upx;
}

.uni-input {
    background-color: #F5F5F5;
    border-radius: 12upx;
    padding: 18upx;
    font-size: 26upx;
    margin-bottom: 20upx;
}

.textaresa {
    width: auto;
    height: 300upx;
}

.uni-buttons {
    position: absolute;
    bottom: 180upx;
    left: 0;
    right: 0;
    background-color: #359BEF;
    color: #ffffff;
    border-radius: 40px;
    margin: 0 30upx;
}
</style>